<template>
  <div id="app">
    <div id="nav">
      <span :class="btnCss.AddGen" @click="handleClick('AddGen')">加法</span> | 
      <span :class="btnCss.AddGen3" @click="handleClick3('AddGen')">三位加法</span> | 
      <span :class="btnCss.SubGen" @click="handleClick('SubGen')">减法</span>
    </div>
    <!-- <Home :flag="comp"></Home> -->
    <component :is="components" :flag="comp"></component>
  </div>
</template>

<script>
import Home from './views/Home'
import Add3 from './views/add3'
export default {
  name: 'App',
  components: {
    Home
    ,Add3
  },
  data() {
    return {
      comp: 'AddGen',
      components: 'Add3',
      btnCss: {
        AddGen: '',
        AddGen3: 'active',
        SubGen: ''
      },
    }
  },
  methods: {
    handleClick(_str) {
      this.components = 'Home';
      this.btnCss = {
        AddGen: '',
        SubGen: ''
      };
      this.btnCss[_str] = 'active';
      this.comp = _str;
    },
    handleClick3() {
      this.components = 'Add3';
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 10px;
  color: #2c3e50;
  span {
    cursor: pointer;
  }
  .active {
    color: #42b983;
  }
}
</style>
